<script setup name="workAdd">
import { useMyStore } from "../store/index";
import { ref, onActivated } from "vue";
import { useRouter } from "vue-router";
import { Upload } from "@/utils/index";
import { InspectElement } from "@/utils/other/components";

import { imgJson, videoJson, textJson } from "@/utils/index";

import dragAndDrop from "@/components/dragAndDrop/index.vue";
import customEditingComponent from "@/components/customEditingComponent/imgEditing.vue";
import videoEditingComponent from "@/components/customEditingComponent/videoEditing.vue";
import textEditing from "@/components/customEditingComponent/textEditing.vue";

import upload from "@/components/upload/index.vue";
const currentIndex = ref();
const isOverlay = ref(false);
const router = useRouter();
const pageContent = useMyStore().customArtwork.pageContent;
const store = useMyStore();

let showPageDeatil = ref(false);
const onCurrentItem = (index) => {
  const handleData = pageContent[store.pageIndex][index];
  currentIndex.value = index;
  Object.keys(store.showComponentEdit).forEach(
    (v) => (store.showComponentEdit[v] = false)
  );
  const key = handleData.name;

  store.showComponentEdit[key] = true;
};
onActivated(() => {
  // if (route.query.back) {
  //   showPageDeatil.value = JSON.parse(route.query.back);
  // }
});

const onJumpPreview = () => {
  router.push("/preview");
};

const addTextEdit = () => {
  const cloneTextJson = JSON.parse(JSON.stringify(textJson));
  isOverlay.value = false;
  cloneTextJson.zIndex = pageContent.length;
  if (pageContent[store.pageIndex]) {
    pageContent[store.pageIndex].push(cloneTextJson);
  } else {
    pageContent.push([cloneTextJson]);
  }

  showPageDeatil.value = true;
};
const uploadCallback = () => {
  isOverlay.value = false;
  showPageDeatil.value = true;
};
const addPage = () => {
  pageContent.push([]);
};
const onPageSwipe = (index) => {
  store.setPageIndex(index);
};
</script>
<template>
  <!-- 页面添加页 -->
  <div class="container">
    <div class="container-right">
      <img
        :style="{ zIndex: pageContent.length ? 99 : 0 }"
        src="@/assets/addContent.png"
        @click="isOverlay = true"
        alt=""
      />
      <img
        :style="{ zIndex: pageContent.length ? 99 : 0 }"
        src="@/assets/set.png"
        alt=""
        @click="router.push('/pageSet')"
      />
    </div>

    <div
      v-if="!store.showComponentEdit.imageEditing"
      class="works-add-footer"
      :style="{
        zIndex:
          !Object.values(store.showComponentEdit).some(
            (value) => value === true
          ) && !isOverlay
            ? 99
            : 0,
      }"
    >
      <div class="works-add-footer-left">
        <div class="works-add-footer-left-item" @click="onJumpTarPage">
          <img class="next" src="@/assets/prevPage.png" alt="" />
          <p>上一页</p>
        </div>
        <div class="works-add-footer-left-item" @click="addPage">
          <img class="addpage" src="@/assets/addPage.png" alt="" />
          <p>新增页</p>
        </div>
        <div class="works-add-footer-left-item" @click="onJumpTarPage('add')">
          <img class="next" src="@/assets/nextPage.png" alt="" />
          <p>下一页</p>
        </div>
      </div>
      <div class="works-add-footer-right">
        <button class="preview" @click="onJumpPreview">
          预览{{ store.pageIndex }}
        </button>
        <button class="save">保存</button>
      </div>
    </div>
  </div>
  <img class="content-img" src="@/assets/empty.png" v-if="!showPageDeatil" />
  <van-overlay :show="showPageDeatil" @click="showPageDeatil = false">
    <div class="canvas-wrapper" :closeable="false" @click.stop>
      <div class="block">
        <van-swipe
          @change="onPageSwipe"
          style="height: 100%"
          vertical
          indicator-color="transparent"
        >
          <van-swipe-item v-for="(item, index) in pageContent" :key="index">
            <template v-for="(son1, index1) in item" :key="index1">
              <dragAndDrop
                v-if="son1.name != 'sound' && son1.name != 'music'"
                :onCurrentItem="onCurrentItem"
                :index="index1"
                :item="son1"
              ></dragAndDrop>
            </template>
          </van-swipe-item>
        </van-swipe>
      </div>
      <template v-if="store.showComponentEdit.image">
        <customEditingComponent
          :showPageDeatil="store.showComponentEdit.image"
          :currentIndex="currentIndex"
        ></customEditingComponent>
      </template>
      <template v-if="store.showComponentEdit.video">
        <videoEditingComponent
          :showPageDeatil="store.showComponentEdit.video"
          :currentIndex="currentIndex"
        ></videoEditingComponent>
      </template>
      <template v-if="store.showComponentEdit.text">
        <textEditing
          :showPageDeatil="store.showComponentEdit.text"
          :currentIndex="currentIndex"
      /></template>
    </div>
  </van-overlay>

  <van-overlay :show="isOverlay" @click="isOverlay = false">
    <div class="wrapper">
      <div class="select-type" @click.stop>
        <p class="wrapper-title">请选择要添加的内容类型</p>
        <div class="wrapper-cell">
          <div class="wrapper-cell-item">
            <upload
              type="image"
              accept=".png,.jpeg,.jpg,.mp4"
              :dataJson="imgJson"
              :callback="uploadCallback"
            >
              <img src="@/assets/uploadImg.png" alt="" />
              <p style="text-align: center">图片</p>
            </upload>
          </div>

          <div class="wrapper-cell-item" @click="router.push('/addBotton')">
            <img src="@/assets/uploadButton.png" alt="" />
            <p>按钮</p>
          </div>
          <div class="wrapper-cell-item" @click="router.push('/selectMusic')">
            <img src="@/assets/uploadMusic.png" alt="" />
            <p>背景音乐</p>
          </div>
          <div class="wrapper-cell-item" @click="">
            <img src="@/assets/uploadFont.png" alt="" @click="addTextEdit" />
            <p>文字</p>
          </div>

          <div class="wrapper-cell-item">
            <upload
              type="video"
              accept=".mp4"
              :dataJson="videoJson"
              :callback="uploadCallback"
            >
              <img src="@/assets/uploadVideo.png" alt="" />
              <p style="text-align: center">视频</p>
            </upload>
          </div>

          <div
            class="wrapper-cell-item"
            @click="router.push('/soundRecording')"
          >
            <img src="@/assets/uploadRideo.png" alt="" />
            <p>录音</p>
          </div>
        </div>
        <p class="tips">
          *请勿上传涉黄、暴力、敏感等内容， 上传内容将受到国家法律监管
        </p>
      </div>
    </div>
  </van-overlay>
</template>

<style lang="less" scoped>
.canvas-wrapper {
  display: flex;
  justify-content: center;
}
.block {
  width: 70vw;
  height: 80vh;
  margin-top: 42px;
  background-color: #ee7737;
  overflow: hidden;
  position: relative;
}
.content-img {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 538px;
  height: 642px;
  transform: translate(-50%, -50%);
}
.container {
  width: 100vw;
  position: absolute;
  .container-right {
    width: 68px;
    height: 166px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: absolute;
    top: 47px;
    right: 20px;
    img {
      width: 68px;
    }
  }
  .container-empty {
    width: 538px;
    height: 642px;
    position: absolute;
    top: 105px;
    left: 144px;
    background-image: url("@/assets/empty.png");
    background-repeat: no-repeat;
    background-size: contain;
    p {
      color: #464646;
      font-size: 24px;
      margin-top: 553px;
      margin-left: 135px;
    }
  }
  .works-add-footer {
    width: 100%;
    height: 223px;
    padding-top: 43px;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 40px 40px 0px 0px;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    .works-add-footer-left {
      width: 40%;
      display: flex;
      justify-content: space-between;
      .works-add-footer-left-item {
        width: 97px;
        height: 79px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
      }
      p {
        font-size: 22px;
        color: #666666;
        margin: 0;
        padding: 0;
      }
      .next {
        width: 30px;
        height: 35px;
      }
      .addpage {
        width: 41px;
        height: 41px;
      }
    }
    .works-add-footer-right {
      width: 50%;
      display: flex;
      margin-right: 29px;
      button:nth-child(1) {
        background: @btn-color;
      }
      button {
        width: 201px;
        height: 90px;
        background: linear-gradient(90deg, @start-btnbgc 0%, @end-btnbgc 100%);
        font-size: 28px;
      }
      .preview {
        border-radius: 16px 0px 0px 16px;
        border: 1px solid #87f4df;
        color: #49cb96;
      }
      .save {
        border-radius: 0px 16px 16px 0px;
        color: #000;
      }
    }
  }
}

.wrapper {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
  color: #b2f7cd;
  .select-type {
    width: 450px;
    padding-bottom: 115px;
    .wrapper-title {
      font-size: 36px;
      text-align: center;
    }
    .wrapper-cell {
      width: 100%;
      font-size: 24px;
      margin-top: 45px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      align-items: center;
      .wrapper-cell-item {
        flex: 33%;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 26px;
        p {
          margin-top: 12px;
        }
        img {
          width: 104px;
          height: 103px;
        }
      }
    }
    .tips {
      font-size: 22px;
      color: #fff;
      text-align: center;
      margin-top: 86px;
    }
  }
}
</style>
